<template>
    <div class="modelBox">
        <div class="modelTitle">仅需3步 轻松建模</div>
        <div class="modelContent">零基础也能轻松作图，快速搭建出您想要的花园</div>
        <div class="modelBtn">
            <div class="tabNav">
                <div v-for="(item, index) in statusTab" :key="index" @mouseover="handleMouseOver(item, index)">
                    <div class="putActive" v-if="activeNumber == index">
                        <div class="buttonActive">{{ item.step }}</div>
                        <div class="titleActive">{{ item.title }}</div>
                        <div class="contentActive">{{ item.content }}</div>
                        <div class="openActive">立即体验 ></div>
                    </div>
                    <div class="putAway" v-else>
                        <div class="buttonAway">{{ item.aliStep }}</div>
                        <div class="nameAway">{{ item.title }}</div>
                    </div>
                </div>
            </div>
            <div class="imgBox"></div>
        </div>
    </div>
</template>

<script setup>
const activeNumber = ref(0);
const statusTab = ref([
    {
        step: "第一步",
        aliStep: "01",
        title: "绘制原型",
        content: "从头开始设计您的理想布局，或使用我们的高级工具在几分钟内识别您的平面图！——操作简单，普通电脑有网络就可以操作",
    },
    {
        step: "第二步",
        aliStep: "02",
        title: "放置模型",
        content: "从头开始设计您的理想布局，或使用我们的高级工具在几分钟内识别您的平面图！——操作简单，普通电脑有网络就可以操作",
    },
    {
        step: "第三步",
        aliStep: "03",
        title: "超清渲染",
        content: "从头开始设计您的理想布局，或使用我们的高级工具在几分钟内识别您的平面图！——操作简单，普通电脑有网络就可以操作",
    },
]);
const handleMouseOver = (item, index) => {
    activeNumber.value = index;
};
</script>

<style lang="less" scoped>
.modelBox {
    background: var(--white);
    padding-bottom: 140px;
}
.modelTitle {
    font-weight: 600;
    font-size: 40px;
    color: var(--black);
    line-height: 56px;
    width: 100%;
    padding-top: 140px;
    box-sizing: border-box;
    text-align: center;
}
.modelContent {
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    color: var(--black);
    line-height: 28px;
    text-align: center;
    margin-top: 16px;
}
.modelBtn {
    display: flex;
    margin-top: 60px;
    justify-content: center;
}
.tabNav {
    width: 570px;
    height: 263px;
    background: var(--white);
    margin-right: 60px;
}
.imgBox {
    width: 720px;
    height: 420px;
    background: var(--deepBlack);
}
.putActive {
    padding-bottom: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.buttonActive {
    width: 100px;
    height: 36px;
    background: var(--black);
    border-radius: 8px;
    text-align: center;
    margin-top: 22px;
    font-weight: 600;
    font-size: 18px;
    color: var(--white);
    line-height: 36px;
}
.titleActive {
    font-size: 32px;
    color: var(--black);
    // line-height: 45px;
    margin-top: 20px;
}
.contentActive {
    font-weight: 400;
    font-size: 16px;
    color: var(--writLight);
    margin-top: 20px;
}
.openActive {
    font-weight: 500;
    font-size: 16px;
    color: var(--green);
    line-height: 22px;
    margin-top: 20px;
}
.putAway {
    width: 570px;
    height: 80px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    .buttonAway {
        width: 36px;
        height: 36px;
        background: var(--black);
        border-radius: 8px;
        font-weight: 400;
        font-size: 18px;
        color: var(--white);
        text-align: center;
        line-height: 36px;
    }
    .nameAway {
        font-weight: 500;
        font-size: 20px;
        color: var(--black);
        margin-left: 20px;
    }
}
</style>
